<template>
  <div id="directMonite">
    <!-- 定向监测源开始 -->
    <h3 class="monitor_title">定向监测源</h3>
    <div class="monitorBox">
      <el-select
        v-model="direction.addType"
        placeholder="请选择"
      >
        <el-option
          v-for="item in direction.addOption"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-input
        class="domainName"
        placeholder="请输入网站域名，例如：www.sina.com"
        suffix-icon="el-icon-search"
        v-model="direction.siteName"
        v-if="direction.addType == '0'"
      >
      </el-input>
      <el-button type="primary" v-if="direction.addType == '0'">添加</el-button>
      <el-button type="info" v-if="direction.addType == '0'">清空</el-button>
      <el-button 
      v-if="direction.addType == '1'" 
      type="primary" 
      class="proviceBtn"
      @click="addSites()"
      >通过省份选择网址
      </el-button>
    </div>
    <div class="tableContent">
      <div class="radioGroup">
        <el-radio
          v-model="direction.tableRadio"
          label="1"
        >定向网吧名称（0）</el-radio>
        <el-radio
          v-model="direction.tableRadio"
          label="2"
        >定向微博昵称（0）</el-radio>
        <el-radio
          v-model="direction.tableRadio"
          label="3"
        >定向微信公众号（0）</el-radio>
        <el-radio
          v-model="direction.tableRadio"
          label="4"
        >定向贴吧名称（0）</el-radio>
      </div>

      <el-table
        :data="direction.tableData"
        max-height="200"
        width="calc(100% - 170px)"
        border
      >
        <el-table-column
          prop="nameTd1"
          label="网站名称"
          width="200"
        >
        </el-table-column>
        <el-table-column
          prop="nameTd2"
          label="域名"
          width="200"
        >
        </el-table-column>
        <el-table-column
          prop="status"
          label="状态"
        >
        </el-table-column>
        <el-table-column
          width="120"
          label="操作"
        >
          <template slot-scope>
            <el-button type="danger">取消监测</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 定向监测源开始 -->
    <!-- 指定排除源开始 -->
    <h3
      class="monitor_title"
      style="margin-top: 40px"
    >指定排除源</h3>
    <div class="monitorBox">
      <el-select
        v-model="appointment.addType"
        placeholder="请选择"
      >
        <el-option
          v-for="item in appointment.addOption"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-input
        class="domainName"
        placeholder="请输入网站域名，例如：www.sina.com"
        suffix-icon="el-icon-search"
        v-model="appointment.siteName"
        v-if="appointment.addType == '0'"
      >
      </el-input>
      <el-button type="primary" v-if="appointment.addType == '0'">添加</el-button>
      <el-button type="info" v-if="appointment.addType == '0'">清空</el-button>
      <el-button 
      v-if="appointment.addType == '1'" 
      type="primary" 
      class="proviceBtn"
      @click="addSites()"
      >通过省份选择网址
      </el-button>
    </div>
    <div class="tableContent">
      <div class="radioGroup">
        <el-radio
          v-model="appointment.tableRadio"
          label="1"
        >定向网吧名称（0）</el-radio>
        <el-radio
          v-model="appointment.tableRadio"
          label="2"
        >定向微博昵称（0）</el-radio>
        <el-radio
          v-model="appointment.tableRadio"
          label="3"
        >定向微信公众号（0）</el-radio>
        <el-radio
          v-model="appointment.tableRadio"
          label="4"
        >定向贴吧名称（0）</el-radio>
      </div>

      <el-table
        :data="appointment.tableData"
        max-height="200"
        width="calc(100% - 170px)"
        border
      >
        <el-table-column
          prop="nameTd1"
          label="网站名称"
          width="200"
        >
        </el-table-column>
        <el-table-column
          prop="nameTd2"
          label="域名"
          width="200"
        >
        </el-table-column>
        <el-table-column
          prop="status"
          label="状态"
        >
        </el-table-column>
        <el-table-column
          width="120"
          label="操作"
        >
          <template slot-scope>
            <el-button type="danger">取消监测</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 指定排除源结束 -->
    <el-dialog
      center
      :close-on-click-modal="false"
      class="siteChooseDialog"
      :visible.sync="dialogData.dialogVisible"
      width="640px">
      <h2 class="title">请选择监测网址</h2>
      <div class="dialogTip">请选择监测网站，支持多选，最多不能超过200个，已监测0个</div>
      <tree-transfer
        :from_data='dialogData.fromData'
        :to_data='dialogData.toData'
        :filterNode="filterNode"
        :defaultProps="{label:'label'}"
        @addBtn='add'
        placeholder="请输入网站名称查询"
        @removeBtn='remove'
        :mode='dialogData.mode'
        :button_text="['增加', '删除']"
        height='300px'
        filter
      >
      </tree-transfer>
      <span
        slot="footer"
        class="dialog-footer"
      >
      <el-button
          type="primary"
          @click="dialogData.dialogVisible = false"
        >保 存</el-button>
        <el-button @click="dialogData.dialogVisible = false">取 消</el-button>
        
      </span>
    </el-dialog>
  </div>
</template>
<script>
import treeTransfer from "el-tree-transfer";
export default {
  data() {
    return {
      direction: {
        addType: "0",
        addOption: [
          { label: "单项添加", value: "0" },
          { label: "按省份批量添加", value: "1" }
        ],
        siteName: "",
        tableData: [
          {
            nameTd1: "百度",
            nameTd2: "www.baidu.com",
            status: "成功"
          },
          {
            nameTd1: "百度",
            nameTd2: "www.baidu.com",
            status: "成功"
          },
          {
            nameTd1: "百度",
            nameTd2: "www.baidu.com",
            status: "成功"
          },
          {
            nameTd1: "百度",
            nameTd2: "www.baidu.com",
            status: "成功"
          },
          {
            nameTd1: "百度",
            nameTd2: "www.baidu.com",
            status: "成功"
          },
          {
            nameTd1: "百度",
            nameTd2: "www.baidu.com",
            status: "成功"
          }
        ],
        tableRadio: "1"
      },
      appointment: {
        addType: "0",
        addOption: [
          { label: "单项添加", value: "0" },
          { label: "按省份批量添加", value: "1" }
        ],
        siteName: "",
        tableData: [
          {
            nameTd1: "微博",
            nameTd2: "www.weibo.com",
            status: "成功"
          },
          {
            nameTd1: "微博",
            nameTd2: "www.weibo.com",
            status: "成功"
          },
          {
            nameTd1: "微博",
            nameTd2: "www.weibo.com",
            status: "成功"
          },
          {
            nameTd1: "微博",
            nameTd2: "www.weibo.com",
            status: "成功"
          },
          {
            nameTd1: "微博",
            nameTd2: "www.weibo.com",
            status: "成功"
          },
          {
            nameTd1: "微博",
            nameTd2: "www.weibo.com",
            status: "成功"
          }
        ],
        tableRadio: "1"
      },
      dialogData: {
        dialogVisible: false,
        filterText: "",
        mode: "transfer", // transfer addressList
        fromData: [
            {
            id: "1",
            pid: 0,
            label: "河北",
            children: [
                {
                id: "1-1",
                pid: "1",
                label: "www.baidu.com"
                },
                {
                id: "1-2",
                pid: "1",
                label: "www.baidu2.com"
                }
            ]
            }
        ],
        toData: []
      }
      
    };
  },
  methods: {
    addSites(arr){
        console.log(arr);
        this.dialogData.dialogVisible = true;
    },
    filterNode(value, data, where){
      console.log(value, data, where);
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 切换模式 现有树形穿梭框模式transfer 和通讯录模式addressList
    changeMode() {
      if (this.mode == "transfer") {
        this.mode = "addressList";
      } else {
        this.mode = "transfer";
      }
    },
    // 监听穿梭框组件添加
    add(fromData, toData, obj) {
      // 树形穿梭框模式transfer时，返回参数为左侧树移动后数据、右侧树移动后数据、移动的{keys,nodes,halfKeys,halfNodes}对象
      // 通讯录模式addressList时，返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表
      console.log("fromData:", fromData);
      console.log("toData:", toData);
      console.log("obj:", obj);
    },
    // 监听穿梭框组件移除
    remove(fromData, toData, obj) {
      // 树形穿梭框模式transfer时，返回参数为左侧树移动后数据、右侧树移动后数据、移动的{keys,nodes,halfKeys,halfNodes}对象
      // 通讯录模式addressList时，返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表
      console.log("fromData:", fromData);
      console.log("toData:", toData);
      console.log("obj:", obj);
    }
  },
  computed: {
      filterText(){
          return this.dialogData.filterText
      }
  },
  watch: {
      filterText(val){
          this.$refs.tree.filter(val)
      }
  },
  components: {
    "tree-transfer": treeTransfer
  }
};
</script>
